<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<style>

</style>

<body>


    <style>
        body {
            background: lightgray;
        }

        a {
            padding: 12px;
            margin: 8px;
            font-size: 23px;
            display: inline-block;
            background: lightcyan;
            border-radius: 6px;
            text-decoration: none;
        }

        a:hover {
            background: lightskyblue;
        }
    </style>


    <h1>index </h1>




    <h2>推荐使用字体库 , 直接 font-size 控制大小, 还方便对齐居中</h2>
    <h2> https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css </h2>

    <style>
        .buttonload {
            background-color: #04AA6D;
            border: none;
            color: white;
            padding: 12px 24px;
            font-size: 36px;
        }
    </style>
    <button class="buttonload">
        <i class="fa fa-refresh fa-spin"></i>Loading
    </button>


    <h3>常见图标:</h3>
    <a href="#" class="previous">&laquo; Previous</a>
    <a href="#" class="next">Next &raquo;</a>
    <a href="#" class="previous round">&#8249;</a>
    <a href="#" class="next round">&#8250;</a>

    <hr>










    <a href="2.html" target="_blank">2</a>
    <a href="Accordion.html" target="_blank">Accordion</a>
    <a href="Animate-Buttons.html" target="_blank">Animate-Buttons</a>
    <a href="before-after.html" target="_blank">before-after</a>
    <a href="Blurred-Background-Image.html" target="_blank">Blurred-Background-Image</a>
    <a href="bu-ju-2.html" target="_blank">bu-ju-2</a>
    <a href="bu-ju.html" target="_blank">bu-ju</a>
    <a href="Carousel-1.html" target="_blank">Carousel-1</a>
    <a href="Carousel-2.html" target="_blank">Carousel-2</a>
    <a href="carousel-Modal-Image-Gallery.html" target="_blank">carousel-Modal-Image-Gallery</a>
    <a href="carousel-Slideshow-Gallery.html" target="_blank">carousel-Slideshow-Gallery</a>
    <a href="Carousel.html" target="_blank">Carousel</a>
    <a href="Cascading-Dropdown-List.html" target="_blank">Cascading-Dropdown-List</a>
    <a href="Change-Background-on-Scroll.html" target="_blank">Change-Background-on-Scroll</a>
    <a href="clearfix.html" target="_blank">clearfix</a>
    <a href="Clickable-Dropdown.html" target="_blank">Clickable-Dropdown</a>
    <a href="feng-hua.html" target="_blank">feng-hua</a>
    <a href="Form-on-Image.html" target="_blank">Form-on-Image</a>
    <a href="Full-Page-Image.html" target="_blank">Full-Page-Image</a>
    <a href="Full-Page-Image2.html" target="_blank">Full-Page-Image2</a>
    <a href="Hero-Image.html" target="_blank">Hero-Image</a>
    <a href="Hide-Menu-on-Scroll.html" target="_blank">Hide-Menu-on-Scroll</a>
    <a href="Horizontal-Scrollable-Menu.html" target="_blank">Horizontal-Scrollable-Menu</a>
    <a href="Hoverable-Dropdown-2.html" target="_blank">Hoverable-Dropdown-2</a>
    <a href="Hoverable-Dropdown.html" target="_blank">Hoverable-Dropdown</a>
    <a href="Hoverable-Sidenav.html" target="_blank">Hoverable-Sidenav</a>
    <a href="Image-Hover-Overlay.html" target="_blank">Image-Hover-Overlay</a>
    <a href="Image-Zoom-2.html" target="_blank">Image-Zoom-2</a>
    <a href="Image-Zoom.html" target="_blank">Image-Zoom</a>
    <a href="index.html" target="_blank">index</a>
    <a href="list_CRUD.html" target="_blank">list_CRUD</a>
    <a href="masonry-Image-Grid.html" target="_blank">masonry-Image-Grid</a>
    <a href="modal-box.html" target="_blank">modal-box</a>
    <a href="Modal-Images.html" target="_blank">Modal-Images</a>
    <a href="Navbar-on-Image.html" target="_blank">Navbar-on-Image</a>
    <a href="Navigation-page.html" target="_blank">Navigation-page</a>
    <a href="Notification-Buttons.html" target="_blank">Notification-Buttons</a>
    <a href="nth-last-child.html" target="_blank">nth-last-child</a>
    <a href="Position-Text-Over-Image.html" target="_blank">Position-Text-Over-Image</a>
    <a href="profile.html" target="_blank">profile</a>
    <a href="qwqweqwe.html" target="_blank">qwqweqwe</a>
    <a href="Scroll-To-Top-Button.html" target="_blank">Scroll-To-Top-Button</a>
    <a href="Sidebar-fixed.html" target="_blank">Sidebar-fixed</a>
    <a href="Sidenav.html" target="_blank">Sidenav</a>
    <a href="Split-Buttons.html" target="_blank">Split-Buttons</a>
    <a href="sticky-navbar.html" target="_blank">sticky-navbar</a>
    <a href="switch-button.html" target="_blank">switch-button</a>
    <a href="Vertical-click-Tabs.html" target="_blank">Vertical-click-Tabs</a>














</body>

</html>